"use client"

import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog"
import { VisuallyHidden } from "@radix-ui/react-visually-hidden"
import type { Player } from "@/lib/types"
import { Trophy, X, ChevronLeft, Star, Clock, Award } from "lucide-react"
import ModeIcon from "./mode-icons"
import Image from "next/image"
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
import { useState } from "react"

interface PlayerModalProps {
  player: Player
  isOpen: boolean
  onClose: () => void
}

export default function PlayerModal({ player, isOpen, onClose }: PlayerModalProps) {
  const [activeTab, setActiveTab] = useState<'stats' | 'tiers'>('stats');
  
  // 解析地区名称函数
  function getRegionName(region: string | undefined): string {
    if (!region) return "未设置";
    
    // 如果地区字符串包含分隔符"|"，说明需要解析
    if (region.includes('|')) {
      const parts = region.split('|');
      return parts[0]; // 返回地区名称部分
    }
    
    return region;
  }

  return (
    <Dialog open={isOpen} onOpenChange={onClose}>
      <DialogContent className="bg-[#1e2228] border-gray-700 p-0 sm:max-w-md w-[95vw] mx-auto rounded-lg shadow-xl animate-scale backdrop-blur-md">
        <DialogTitle asChild>
          <VisuallyHidden>Player Profile</VisuallyHidden>
        </DialogTitle>
        
        {/* 顶部玩家信息 */}
        <div className="relative bg-gradient-to-b from-[#1c1e24] to-[#262a33] rounded-t-lg p-4 sm:p-6 pb-16">
          {/* 关闭按钮 */}
          <button
            onClick={onClose}
            className="absolute right-3 top-3 rounded-full w-7 h-7 flex items-center justify-center bg-gray-800/80 hover:bg-gray-700 opacity-70 ring-offset-background transition-all duration-200 hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none hover:rotate-90 z-10"
          >
            <X className="h-4 w-4" />
            <span className="sr-only">关闭</span>
          </button>
          
          {/* 返回按钮 */}
          <button
            onClick={onClose}
            className="absolute left-3 top-3 rounded-full w-7 h-7 flex items-center justify-center bg-gray-800/80 hover:bg-gray-700 opacity-70 ring-offset-background transition-all duration-200 hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none hover:translate-x-[-2px] z-10"
          >
            <ChevronLeft className="h-4 w-4" />
            <span className="sr-only">返回</span>
          </button>
          
          {/* 玩家基本信息 */}
          <div className="flex flex-col items-center relative z-[1]">
            <div className="relative">
              <div className="w-20 h-20 sm:w-24 sm:h-24 rounded-full overflow-hidden border-2 border-yellow-500 shadow-lg hover:shadow-yellow-500/20 transition-shadow duration-300 bg-gray-800">
                <img
                  src={player.avatar || "/placeholder.svg"}
                  alt={player.name}
                  className="w-full h-full object-cover hover:scale-110 transition-transform duration-500"
                />
              </div>
              {(player.overallRank === 1 || player.rank === 1) && (
                <div className="absolute -top-1 -right-1 bg-yellow-500 rounded-full p-1 animate-pulse">
                  <Trophy className="h-4 w-4 text-black" />
                </div>
              )}
            </div>

            <h2 className="text-xl sm:text-2xl font-bold mt-3 sm:mt-4 text-center text-white">{player.name}</h2>
            <TooltipProvider>
              <Tooltip>
                <TooltipTrigger asChild>
                  <div className="flex items-center mt-1 px-3 py-1 rounded-full text-sm cursor-help hover:brightness-110 transition-all duration-200" style={{ backgroundColor: `${player.title?.color || '#808080'}40` }}>
                    {player.title?.icon && (
                      <img 
                        src={player.title.icon} 
                        alt="称号图标" 
                        className="w-4 h-4 sm:w-5 sm:h-5 mr-1 object-contain" 
                      />
                    )}
                    <span>{player.title?.name || '新手'}</span>
                  </div>
                </TooltipTrigger>
                <TooltipContent className="bg-gray-800 text-white border-gray-700 rounded-md p-2 animate-fade-in shadow-lg">
                  <p className="font-medium">{player.title?.name || "新手"}</p>
                  <p className="text-sm mt-1">{player.title?.description || "玩家称号"}</p>
                  <p className="text-xs text-gray-400 mt-1">得分: {player.title?.points || 0}</p>
                </TooltipContent>
              </Tooltip>
            </TooltipProvider>

            <div className="mt-2 sm:mt-3 text-gray-300 bg-gray-800/50 px-3 py-1 rounded-full text-sm font-medium shadow-inner">{getRegionName(player.region) || '未设置地区'}</div>
          </div>
          
          {/* 背景装饰 */}
          <div className="absolute top-0 left-0 w-full h-full overflow-hidden rounded-t-lg">
            <div className="absolute w-40 h-40 rounded-full bg-blue-500/10 -top-20 -left-20 blur-xl"></div>
            <div className="absolute w-32 h-32 rounded-full bg-yellow-500/10 -top-10 right-10 blur-lg"></div>
          </div>
        </div>
        
        {/* 标签导航 */}
        <div className="flex border-b border-gray-700">
          <button
            onClick={() => setActiveTab('stats')}
            className={`flex-1 py-3 text-center text-sm font-medium relative transition-colors duration-200 ${
              activeTab === 'stats' 
                ? 'text-white' 
                : 'text-gray-400 hover:text-gray-300'
            }`}
          >
            数据统计
            {activeTab === 'stats' && (
              <div className="absolute bottom-0 left-0 w-full h-0.5 bg-yellow-500 animate-fade-in"></div>
            )}
          </button>
          <button
            onClick={() => setActiveTab('tiers')}
            className={`flex-1 py-3 text-center text-sm font-medium relative transition-colors duration-200 ${
              activeTab === 'tiers' 
                ? 'text-white' 
                : 'text-gray-400 hover:text-gray-300'
            }`}
          >
            段位信息
            {activeTab === 'tiers' && (
              <div className="absolute bottom-0 left-0 w-full h-0.5 bg-yellow-500 animate-fade-in"></div>
            )}
          </button>
        </div>

        {/* 内容区域 */}
        <div className="p-4 sm:p-6 overflow-y-auto max-h-[50vh] custom-scrollbar">
          {activeTab === 'stats' && (
            <div className="space-y-4 animate-fade-in">
              {/* 排名信息 */}
              <div className="bg-[#252830] rounded-lg p-3 sm:p-4 flex items-center gap-2 sm:gap-3 hover:bg-[#2a2d35] transition-colors duration-200 shadow-md">
                <div className="bg-yellow-500/20 rounded px-3 py-1.5 font-bold text-yellow-400">{player.overallRank || player.rank}.</div>
                <div className="flex items-center gap-1 sm:gap-2">
                  <Trophy className="h-4 w-4 sm:h-5 sm:w-5 text-yellow-500" />
                  <span className="font-medium text-sm sm:text-base">OVERALL</span>
                  <span className="text-gray-400 text-xs sm:text-sm">({player.overallScore || player.title?.points || 0} 分)</span>
                </div>
              </div>
              
              {/* 统计数据卡片 */}
              <div className="grid grid-cols-2 gap-3">
                <div className="bg-[#252830] rounded-lg p-3 flex flex-col items-center hover:bg-[#2a2d35] transition-colors duration-200 shadow-md">
                  <Star className="h-5 w-5 text-yellow-500 mb-2" />
                  <div className="text-xs text-gray-400">积分</div>
                  <div className="font-bold text-lg">{player.overallScore || player.title?.points || 0}</div>
                </div>
                <div className="bg-[#252830] rounded-lg p-3 flex flex-col items-center hover:bg-[#2a2d35] transition-colors duration-200 shadow-md">
                  <Award className="h-5 w-5 text-purple-500 mb-2" />
                  <div className="text-xs text-gray-400">排名</div>
                  <div className="font-bold text-lg">#{player.overallRank || player.rank}</div>
                </div>
              </div>
            </div>
          )}

          {activeTab === 'tiers' && (
            <div className="animate-fade-in">
              <div className="bg-[#252830] rounded-lg p-4 shadow-md">
                <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
                  {player.swordTierName && player.swordTierName !== '无等级' && (
                    <div className="bg-[#1e2228] p-2 rounded flex items-center gap-2 hover:bg-[#262a33] transition-colors duration-200 hover:scale-[1.02] transform cursor-default shadow">
                      <div className="flex items-center gap-1">
                        <ModeIcon category="combat" size={16} />
                        <div className="text-gray-400 text-xs sm:text-sm">剑术:</div>
                      </div>
                      <div className="bg-gray-700/70 rounded px-2 py-0.5 text-xs sm:text-sm text-gray-200 hover:bg-gray-600/70 transition-colors shadow-inner">{player.swordTierName}</div>
                    </div>
                  )}
                  {player.crystalTierName && player.crystalTierName !== '无等级' && (
                    <div className="bg-[#1e2228] p-2 rounded flex items-center gap-2 hover:bg-[#262a33] transition-colors duration-200 hover:scale-[1.02] transform cursor-default shadow">
                      <div className="flex items-center gap-1">
                        <ModeIcon category="crystal" size={16} />
                        <div className="text-gray-400 text-xs sm:text-sm">水晶:</div>
                      </div>
                      <div className="bg-gray-700/70 rounded px-2 py-0.5 text-xs sm:text-sm text-gray-200 hover:bg-gray-600/70 transition-colors shadow-inner">{player.crystalTierName}</div>
                    </div>
                  )}
                  {player.buhcTierName && player.buhcTierName !== '无等级' && (
                    <div className="bg-[#1e2228] p-2 rounded flex items-center gap-2 hover:bg-[#262a33] transition-colors duration-200 hover:scale-[1.02] transform cursor-default shadow">
                      <div className="flex items-center gap-1">
                        <ModeIcon category="heart" size={16} />
                        <div className="text-gray-400 text-xs sm:text-sm">UHC:</div>
                      </div>
                      <div className="bg-gray-700/70 rounded px-2 py-0.5 text-xs sm:text-sm text-gray-200 hover:bg-gray-600/70 transition-colors shadow-inner">{player.buhcTierName}</div>
                    </div>
                  )}
                  {player.potionTierName && player.potionTierName !== '无等级' && (
                    <div className="bg-[#1e2228] p-2 rounded flex items-center gap-2 hover:bg-[#262a33] transition-colors duration-200 hover:scale-[1.02] transform cursor-default shadow">
                      <div className="flex items-center gap-1">
                        <ModeIcon category="potion" size={16} />
                        <div className="text-gray-400 text-xs sm:text-sm">药水:</div>
                      </div>
                      <div className="bg-gray-700/70 rounded px-2 py-0.5 text-xs sm:text-sm text-gray-200 hover:bg-gray-600/70 transition-colors shadow-inner">{player.potionTierName}</div>
                    </div>
                  )}
                  {player.npotTierName && player.npotTierName !== '无等级' && (
                    <div className="bg-[#1e2228] p-2 rounded flex items-center gap-2 hover:bg-[#262a33] transition-colors duration-200 hover:scale-[1.02] transform cursor-default shadow">
                      <div className="flex items-center gap-1">
                        <ModeIcon category="discord" size={16} />
                        <div className="text-gray-400 text-xs sm:text-sm">合金pot:</div>
                      </div>
                      <div className="bg-gray-700/70 rounded px-2 py-0.5 text-xs sm:text-sm text-gray-200 hover:bg-gray-600/70 transition-colors shadow-inner">{player.npotTierName}</div>
                    </div>
                  )}
                  {player.smpTierName && player.smpTierName !== '无等级' && (
                    <div className="bg-[#1e2228] p-2 rounded flex items-center gap-2 hover:bg-[#262a33] transition-colors duration-200 hover:scale-[1.02] transform cursor-default shadow">
                      <div className="flex items-center gap-1">
                        <ModeIcon category="circle" size={16} />
                        <div className="text-gray-400 text-xs sm:text-sm">SMP:</div>
                      </div>
                      <div className="bg-gray-700/70 rounded px-2 py-0.5 text-xs sm:text-sm text-gray-200 hover:bg-gray-600/70 transition-colors shadow-inner">{player.smpTierName}</div>
                    </div>
                  )}
                  {!player.swordTierName && !player.crystalTierName && !player.buhcTierName && 
                  !player.potionTierName && !player.npotTierName && !player.smpTierName && (
                    <div className="col-span-1 sm:col-span-2 text-center text-gray-400 py-6">该玩家暂无段位信息</div>
                  )}
                </div>
              </div>
              
              {/* 最高段位展示 */}
              {player.bestTierName && (
                <div className="mt-4">
                  <h3 className="text-gray-400 uppercase text-xs sm:text-sm font-semibold mb-2 flex items-center">
                    <span className="mr-2">最高段位</span>
                    <div className="flex-grow h-[1px] bg-gray-700/50"></div>
                  </h3>
                  <div className="bg-[#252830] rounded-lg p-4 shadow-md flex items-center gap-3">
                    <div className="bg-yellow-900/50 p-2 rounded-full">
                      <Trophy className="h-6 w-6 text-yellow-500" />
                    </div>
                    <div>
                      <div className="font-medium">{player.bestTierName}</div>
                      <div className="text-sm text-gray-400">{getModeDisplayName(player.bestTierMode || '')}</div>
                    </div>
                  </div>
                </div>
              )}
            </div>
          )}
        </div>
      </DialogContent>
      
      {/* 添加自定义滚动条样式 */}
      <style jsx global>{`
        .custom-scrollbar::-webkit-scrollbar {
          width: 4px;
        }
        .custom-scrollbar::-webkit-scrollbar-track {
          background: #1e2126;
        }
        .custom-scrollbar::-webkit-scrollbar-thumb {
          background-color: #4a5568;
          border-radius: 4px;
        }
        .custom-scrollbar::-webkit-scrollbar-thumb:hover {
          background-color: #718096;
        }
      `}</style>
    </Dialog>
  )
}

function getModeDisplayName(mode: string): string {
  switch(mode) {
    case 'SWORD': return '剑术模式';
    case 'CRYSTAL': return '水晶模式';
    case 'BUHC': return 'UHC模式';
    case 'POTION': return '药水模式';
    case 'NPOT': return '合金pot模式';
    case 'SMP': return 'SMP模式';
    default: return '未知模式';
  }
}
